<template>
  <div>
    <van-swipe class="my-swipe" indicator-color="yellow" :loop="false" :touchable="true"
               :show-indicators="true" autoplay>
      <van-swipe-item>
          <div class="div1">
            <van-button round type="default" class="tiao" @click="protocol">跳过</van-button><br>
          </div>
          <img src="../../img/引导页1.png" alt=""/><br>
          <span class="sp1">小默盒管家 1.0</span>
      </van-swipe-item>
      <van-swipe-item>
        <div class="div1">
          <van-button round type="default" class="tiao" @click="protocol">跳过</van-button><br>
        </div>
        <img src="../../img/引导页2.svg" alt=""/><br>
        <div class="div2">
          <span class="sp1">已实现派件功能</span><br>
        </div>
        <div class="div3">
          <van-button round type="default" @click="protocol">立即体验</van-button>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  name: 'Guide',
  data() {
    return {

    };
  },
  methods:{
    protocol(){
      this.$router.push({
        path: '/login/Protocol',
      });
    }
  }
};
</script>

<style>
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: white;
    }
    .sp1{
      color: #EE7933;
    }
    img{
      margin-top: 15px;
    }
    .div1{
      width: 64px;
      height: 0;
    }
    .tiao{
      margin-left: 320px;
    }
    .div2{
      margin-top: -115px;
    }
    .div3{
      margin-top: -60px;
    }
</style>